<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>固定位置</title>

        
        <style type="text/css">
            body { margin: 0 ; padding: 0 ;}

            .odd { height: 300px; line-height: 300px ; background: #dedede ; }
            .even { height: 300px; line-height: 300px ; background: rgb(255, 190, 69) ;}

            /* 选择器分组 或 选择器列表 ( 多个选择器使用逗号隔开，建议每行写一个选择器 )*/
            h3 , 
            p { text-align: center ; }

            .wrapper { border: 1px solid blue ; background: #ff0; }

            .first {
                position: fixed ; /* 采用 固定定位 后元素的宽度不再是占满整行 */
                top: 10px ; /* 元素顶边距离浏览器窗口顶边的偏移量 */
                left: 10% ; /* 元素左边距离浏览器窗口左边的偏移量 */
                width: 80% ; /* 固定定位的元素宽度需要显式设置 */
            }

            .second {
                position: fixed ; /* 采用 固定定位 后元素的宽度不再是占满整行 */
                bottom: 10px ; /* 元素底边距离浏览器窗口底边的偏移量 */
                right: 10% ; /* 元素右边距离浏览器窗口右边的偏移量 */
                width: 80% ; /* 固定定位的元素宽度需要显式设置 */
            }

            .third {
                position: fixed ; 
                left: 10px ;
                top: 10% ;
                width: 100px ;
                height: 80% ;
            }

            .fourth {
                position: fixed ; 
                right: 10px ;
                top: 10% ;
                width: 100px ;
                height: 80% ;
            }

            
        </style>
    </head>
    <body>

        <h3>固定定位</h3>

        <p>position: fixed 相对于 <b>浏览器窗口</b> 进行定位</p>

        <div class="wrapper first">top</div>

        <div class="wrapper second">bottom</div>

        <div class="wrapper third"></div>

        <div class="wrapper fourth">fourth</div>

        <script type="text/javascript">
        ( function(){
            let body = document.querySelector( 'body' ); 
            for( let i = 0 ; i < 200 ; i++ ) {
                let div = document.createElement( 'div' );
                div.innerHTML = ( i + 1 );
                div.classList.add( i % 2 == 1 ? 'odd' : 'even' );
                body.appendChild( div );
            }
        })();
        </script>
        
    </body>
</html>